<template>
  <div
    id="tool-wrapper"
    :style="{ right: isManage ? '1%' : '30%' }"
  >
    <div
      class="tool-item"
      v-for="item in tools"
      :title="item.title"
    >
      <a-popover
        v-if="item.title === '图层控制'"
        placement="leftTop"
        trigger="click"
      >
        <template #content> </template>
        <i
          :class="['iconfont', item.icon, disabled ? 'disabled-icon' : '']"
        ></i>
      </a-popover>
      <i
        :class="['iconfont', item.icon]"
        v-else
      ></i>
    </div>
  </div>
</template>

<script setup>
import { renderAll } from '@/cesiumTools/effectController.js';
import { ref, onMounted } from 'vue';
import { watchLineData } from '@/store';

const tools = ref([
  {
    title: '鼠标位置',
    icon: 'metro-zhizhen',
  },
  {
    title: '图层控制',
    icon: 'metro-layer',
  },
  {
    title: '全屏控件',
    icon: 'metro-quanping_o',
  },
]);

const disabled = ref(false);
const isManage = ref(false);

onMounted(async () => {
  const viewer = await watchLineData('setViewer');
  const lineData = await watchLineData('setData');
  renderAll(viewer, lineData);
});
</script>
<style scoped>
#tool-wrapper {
  position: absolute;
  right: 30%;
  bottom: 10%;
  display: flex;
  flex-direction: column;
  z-index: 199;
}

.tool-item {
  margin: 4px;
  pointer-events: all;
  cursor: pointer;
}

.tool-item:hover {
  background-color: #d8951a7f;
}

#tool-wrapper i {
  color: #ffd31a;
  border: 1px solid #d8951a;
  padding: 3px;
}

#tool-wrapper span {
  color: #fff;
}

.disabled-icon {
  pointer-events: none;
  cursor: none;
  background-color: rgba(204, 204, 204, 0.306);
}

.disabled-icon:hover {
  cursor: none;
}
</style>
